<template>
  <div>

    <el-button type="text" @click="dialogFormVisible = true">打开对话框</el-button>

    <el-dialog :title="this.form.name" :visible.sync="dialogFormVisible">
      <div class="status">({{this.status}})</div>
      <div class="content" ref="msg-box">
        <div v-for="item in respMes">
          <div class="time">
            {{item.time}}
          </div>
          <br>
          <div class="he" v-if="item.sender==='admin'">
            对方:<br>
            <div class="meInfo">
              <div style="position: relative;">{{item.info}}</div>
            </div>
          </div>

          <div class="me" v-else>
            我:<br>
            <div class="meInfo">
              <div style="position: relative;">
                {{item.info}}
              </div>
            </div>
          </div>
          <br>
          <br>
          <br>
          <br>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="textArea">
          <textarea name="aaa" id="input" cols="98" rows="5" style="font-size: 20px; width: 700px" v-model="form.mes"></textarea>
        </div>
        <div class="submit">
          <el-button type="primary" @click="send" round>发送</el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  methods:{
    getTime() {
      let date = new Date();
      let seperator1 = "-";
      let seperator2 = ":";
      //以下代码依次是获取当前时间的年月日时分秒
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      let minute = date.getMinutes();
      let hour = date.getHours();
      let second = date.getSeconds();
      //固定时间格式
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minute >= 0 && minute <= 9) {
        minute = "0" + minute;
      }
      if (second >= 0 && second <= 9) {
        second = "0" + second;
      }
      return year + seperator1 + month + seperator1 + strDate
        + " " + hour + seperator2 + minute + seperator2 + second;
    },

    flushMes(){
       let _this = this
       this.$axios({
          method:'GET',
          url:"http://localhost/user_admin/flushMes/"+this.username
       }).then(response => {
          _this.respMes=response.data
       })
    },

    open: function () {
      this.$notify({
        title: '成功',
        message: '人工客服连接成功',
        type: 'success'
      });
    },
    error: function () {
      console.log("连接错误")
    },
    getMessage: function (event) {
      //消息数++

      if(event.data=='管理员目前不在线，您可以发送消息进行留言'){
        this.$notify({
          title: '警告',
          message: event.data,
          type: 'warning'
        });
      }
      else if(event.data=='在线'){
        this.status='在线'
      }

      else if(event.data=='离线'){
        this.status='离线'
      }

      else if(event.data=='繁忙'){
        this.status='繁忙'
      }

      else{
        this.$notify.info({
          title: '您收到一条消息',
          message: event.data
        });
        let time = this.getTime()
        let receiveMes = {
          id: '',
          info: event.data,
          isRead: '',
          receive: "",
          sender: "admin",
          time: time
        }
        this.respMes.push(receiveMes)
      }

    },
    send: function () {
      this.socket.send(this.form.mes)

      let time=this.getTime()
      let sendMes = {
        id: '',
        info: this.form.mes,
        isRead: '',
        receive: "admin",
        sender: "",
        time: time
      }
      this.respMes.push(sendMes)
      this.form.mes=''

      let isread = 0
      if(this.status=="在线")
      {
        isread = 1
      }else{
        isread = 0
      }

      this.$axios({
         method:"POST",
         url:"http://localhost/user_admin/save",
         data:{
           sender:this.username,
           receive:'admin',
           info:sendMes.info,
           time:sendMes.time,
           isread:isread
         }
      }).then(result => {

      })
    },

    close: function () {
      console.log("socket已经关闭")
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: true,
      socket:"",
      respMes:[],
      i:0,
      status:'',
      form: {
        name: '人工客服',
        mes:'',
        repsMes:'',
        id:'',
      },
      sendMesInfo:{
         user:'',
         receive:'',
         info:'',

      },
      formLabelWidth: '120px'
    };
  },

  destroyed() {
    this.socket.close()
  },

  mounted() {
    this.username=this.$route.query.username

    this.flushMes()
    if(typeof(WebSocket) === "undefined"){
      alert("您的浏览器不支持socket")
    }else{
      // 实例化socket
      this.socket = new WebSocket("ws://localhost:80/chat/"+this.username+"/admin")
      // 监听socket连接
      this.socket.onopen = this.open
      // 监听socket错误信息
      this.socket.onerror = this.error
      // 监听socket消息
      this.socket.onmessage = this.getMessage
    }

  }
};
</script>




<style scoped>
.dialog-footer{
  position: relative;
  height: 120px;
  width: 100%;
  left:0;
  background-color: white;
}
.textArea{
  position: relative;
  left: 1.5%;
  width: 200px;
  height: 120px;
}
.submit{
  position: relative;
  top: -40px;
  left: -25px;
}
.content{
  position: relative;
  border-style:solid;
  border-width:1px;
  height: 300px;
  border-color: black;
  overflow-y:scroll ;
}

.he{
  font-size: 15px;
  position: absolute;
  left: 0
}
.me{
  font-size: 15px;
  position: absolute;
  right:0;

}
.time{
  font-size: 10px;
}
.status{
  position: absolute;
  top: 23px;
  right: 310px;
}
.meInfo{
  border-style:solid;
  border-width:1px;
  border-color: black;
  height: auto;
  width:auto;
  display:inline-block !important;


}
</style>
